<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>搜索框</title>
	</head>
	<style>
	#ad{
		width: 800px;
		height: 820px;
		border: 1px solid red;
		position: relative;
	}
	#div{
		text-align: center;
		border: 1px solid blue;
		background-color: blueviolet;
		position: absolute;
		/*height: 30px;*/
		top: 20px;
		left: 300px;
	}
	</style>
	<script type="text/javascript" src="../../js/jquery-1.12.4 (1).js" ></script>
	<script>
		$(function() {
			var len = $("#div").offset().top+$("#div").height();
			//获取最后一个元素距离浏览器顶部的距离，还要加上元素的高度
			$(window).scroll(function() {
				 //获取滚动条的滑动距离
				var len1 = $(this).scrollTop();
				 //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定
				if(len1 >= len) {
					$("#div").css({
						"position": "fixed",
						"top": "20px"
					});
				} else {
					$("#div").css("position", "static");
				}
				});
		});
	</script>

	</script>
	<body>
		<div id="ad">
			<div  id="div">搜索：<input type="text" value="搜索" name="seach"/ id="sou"></div>
		</div>
	</body>
</html>
